.shape {
  border-width: v-bind(borderWidth);
  border-color: v-bind(borderColor);
  border-style: v-bind(borderStyle);
  position: absolute;
  cursor: pointer;
  &::after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .error-info {
    color: red;
    font-size: 20px;
    white-space: nowrap;
  }
}

.active {
  user-select: none;
  outline: 1px solid #70c0ff;
  .shape-point, .rotation  {
    display: block;
  }
  &:hover {
    cursor: move;
  }
}

.shape-point {
  display: none;
  position: absolute;
  z-index: 10;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(96, 165, 250 );
  background-color: #fff;
  margin-left: -4px;
  margin-top: -4px;
}

.rotation {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 600;
  cursor: grab;
  display: none;
  &:active {
    cursor: grabbing;
  }
}

.icon-jiesuo {
  @apply absolute top-0 right-0;
}

div em {
  @apply absolute -top-6 left-0;
  background-color: #f0f8ff52;
  border-radius: 3px;
  color: antiquewhite;
}

.shape-point.lt.rotate-0,
.shape-point.rb.rotate-0,
.shape-point.l.rotate-45,
.shape-point.r.rotate-45,
.shape-point.lb.rotate-90,
.shape-point.rt.rotate-90,
.shape-point.t.rotate-135,
.shape-point.b.rotate-135 {
  cursor: nwse-resize;
}

.shape-point.t.rotate-0,
.shape-point.b.rotate-0,
.shape-point.lt.rotate-45,
.shape-point.rb.rotate-45,
.shape-point.l.rotate-90,
.shape-point.r.rotate-90,
.shape-point.lb.rotate-135,
.shape-point.rt.rotate-135 {
  cursor: ns-resize;
}

.shape-point.lb.rotate-0,
.shape-point.rt.rotate-0,
.shape-point.t.rotate-45,
.shape-point.b.rotate-45,
.shape-point.lt.rotate-90,
.shape-point.rb.rotate-90,
.shape-point.l.rotate-135,
.shape-point.r.rotate-135 {
  cursor: nesw-resize;
}

.shape-point.l.rotate-0,
.shape-point.r.rotate-0,
.shape-point.lb.rotate-45,
.shape-point.rt.rotate-45,
.shape-point.t.rotate-90,
.shape-point.b.rotate-90,
.shape-point.lt.rotate-135,
.shape-point.rb.rotate-135 {
  cursor: ew-resize;
}